<template>
  <div>
    <div style="margin: 20px 0;">
      <el-button type="prinary" @click="handleAdd">创建角色</el-button>
      <el-button type="success" :disabled="currentRow == null ? true : false" @click="roleAuthVisible=true">设置角色权限</el-button>
    </div>
    <el-table ref="singleTableRef" :data="roleList" highlight-current-row style="width: 100%" height="500"
  :border="true" @current-change="handleCurrentChange">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column property="name" label="角色名称" />
      <el-table-column property="create_time" label="创建时间" :formatter="resetDate" />
      <el-table-column property="auth_time" label="授权时间" :formatter="resetDate"/>
      <el-table-column property="auth_name" label="授权人" />
    </el-table>
    <!-- 添加角色弹窗 -->
    <el-dialog v-model="roleFormVisible" title="添加角色" width="500">
      <el-form :model="role" ref="roleFormRef" label-width="100px" style="width: 400px;" :rules="rules">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="role.name" placeholder="请输入角色名称" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addRole(roleFormRef)">
            确定
          </el-button>
          <el-button @click="roleFormVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--设置角色权限弹窗 -->
    <el-dialog v-model="roleAuthVisible" title="设置角色权限" width="500">
      <Auth :role="currentRow" v-if="roleAuthVisible" ref="authRef"/>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="updateDate">
            确定
          </el-button>
          <el-button @click="roleAuthVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue';
import { formateDate } from '@/utils/dataUtils';
// 引人权限子组件
import Auth from './components/Auth.vue';
// 引入角色小仓库
import type { roleInforDate } from '@/api/role/type.ts';
import useRoleStore from '@/store/modules/role.ts';
import { type FormInstance, type FormRules } from 'element-plus';
// 引入用户小仓库
import useUserStore from '@/store/modules/user';
const userStore = useUserStore()
const roleStore = useRoleStore()
const authRef=ref()

// 角色列表
const roleList = ref<roleInforDate[]>([])
// 获取角色列表
const getRoles = () => {
  roleStore.getRoleList().then(() => {
    roleList.value = roleStore.roles as roleInforDate[]
    console.log("roles", roleStore.roles);

  })
}
// 格式化日期数据 :row:当前要格式化数据所在行对象，colum：列对象，cellvalue：要格式化的数据
// @ts-ignore
const resetDate = (row: any, colum: any, cellValue: number, index: number) => {
  return formateDate(cellValue)
}

// 当前选中的行
const currentRow = ref<roleInforDate|null>(null)

// 当选中行发生变化时出发的函数
const handleCurrentChange = (val: any) => {
  currentRow.value=val
}
// 
// 添加角色表单ref对象
const roleFormRef = ref()
// 添加角色
const handleAdd = () => {
  roleFormVisible.value = true;
  // 当组件中所有的dom元素加载完毕之后，回调函数才会执行
  nextTick(() => {
    // 重置菜单内容
    roleFormRef.value.resetFields()
  })
};
// 添加角色弹窗是否显示
const roleFormVisible = ref(false);

// 表单校验规则
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
});
// 添加角色表达数据收集对象
const role = ref({
  name: "",
});
// 添加角色确定按键点击回调
const addRole = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      roleStore.addRole(role.value).then(() => {
        roleFormVisible.value = false
        getRoles()
      })

    } else {  
      console.log('error submit!');

    }
  });
};
// 设置角色权限弹窗是否展示
const roleAuthVisible = ref(false)
const updateDate = ()=>{
// 先获取auth组件中的getMenus方法，返回值为更新之后的角色数据
const newRole = authRef.value.getMenus()
// currentRow中才是真正存储的这个角色没有修改之前的数据
// @ts-ignore
currentRow.value.menus=newRole.menus
// @ts-ignore
currentRow.value.name=newRole.name
// @ts-ignore
currentRow.value.auth_name= userStore.user?.username
// @ts-ignore
roleStore.updateRole(currentRow.value).then(()=>{
  roleAuthVisible.value = false
  getRoles()
})


}



onMounted(() => {
  getRoles()
})



</script>

<style scoped></style>